<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="pamars">
      <el-form-item label="">
        <el-button icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="pamars.title" placeholder="商品名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="所属店铺">
        {{$route.params.shopName}}
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
      </el-form-item>

    </el-form>
    <el-table :data="dataList" v-loading="tableLoading" row-key="Id" border style="width: 100%; ">
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          <span>{{(pamars.page - 1) * pamars.limit + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="cover" align="center" label="商品图片">
        <template slot-scope="scope">
          　　　　<el-popover placement="top-start" trigger="hover">
            <a :href="scope.row.cover" target="_blank" title="查看最大化图片"><img :src="scope.row.cover" style="width: 300px;height: 300px" /></a>
            <img slot="reference" :src="scope.row.cover" @click="$openImg(scope.row.cover)" style="width: 50px;height: 50px; cursor:pointer" />
          </el-popover>
          <!-- <el-image class="table-img" :src="scope.row.cover" :preview-src-list="[scope.row.cover]">
					</el-image> -->
        </template>
      </el-table-column>
      <el-table-column prop="title" align="center" label="商品名称">
      </el-table-column>
      <el-table-column prop="shop_name" align="center" label="所属店铺">
      </el-table-column>
      <el-table-column prop="min_sale_price" align="center" label="价格">
      </el-table-column>
      <!-- <el-table-column prop="sort" align="center" label="排序">
	  </el-table-column> -->
      <el-table-column prop="real_sale_num" align="center" label="实际销量">
      </el-table-column>

      <!-- :formatter="statusFormatter" -->
      <el-table-column prop="verify_status" align="center" label="贡献值">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" class="c-info" @click="look(scope.row.id)" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChange" @current-change="currentChange" :page-size="pamars.limit" :page-sizes="[10, 20, 50, 100]" :current-page="pamars.page" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    <!-- 查看 -->
    <productList-look v-if="dialogVisible" ref="productLook" @result="result"></productList-look>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
import productListLook from '@/views/modules/platform/product/productList-look'
export default {
  data () {
    return {
      pamars: {
        page: 1,
        limit: 10,
        verify_status: 1,
        title: '',
        shop_name: '',
        category_id: null
      },
      totalPage: 0,
      dataList: [],
      tableLoading: false,
      dataListLoading: false,
      dialogVisible: false,
      typeList: [{
        id: 0,
        name: '待审核'
      }, {
        id: 1,
        name: '审核通过'
      }, {
        id: 2,
        name: '审核不通过'
      }],
      typeTree: [],
      area_featureArr: [
        { label: "普通商品", value: 0 },
        { label: "激活商品", value: 1 },
        // { label: "服务体系礼包", value: 1 },
        // { label: "新人福利区", value: 2 },
        // { label: "公益申领", value: 3 }
      ]
    }
  },
  components: {
    productListLook
  },
  mounted () {
    this.getList();
    this.geTypetList()
  },
  methods: {
    getList () {
      this.tableLoading = true;
      this.pamars.shop_id = this.$route.params.shopId;
      seviceApi.getGoodsAllList(this.pamars).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.totalPage = res.data.page.totalCount
        }
        this.tableLoading = false
      })
    },
    typeTreeChange (e) {
      if (e.length > 0) {
        this.pamars.category_id = e[e.length - 1]
      } else {
        this.pamars.category_id = null
      }
    },
    // 获取分类tree
    geTypetList () {
      seviceApi.getCategoryAllList(this.pamars).then(res => {
        if (res && res.data.code == 200) {
          this.typeTree = res.data.list;
          this.dealTree(this.typeTree)
          console.log(this.typeTree)
        }
      })
    },
    // 处理tree
    dealTree (tree) {
      tree.forEach(v => {
        if (v.children && v.children.length > 0) {
          this.dealTree(v.children)
        } else {
          delete v.children;
        }
      })
    },
    sizeChange (e) {
      this.pamars.page = 1
      this.pamars.limit = e
      this.getList()
    },

    currentChange (e) {
      this.pamars.page = e
      this.getList()
    },

    typeChange () {
      if (this.pamars.verify_status !== 0 && !this.pamars.verify_status) {
        this.pamars.verify_status = null
      }
    },

    result () {
      this.dialogVisible = false
      this.getList()
    },

    // 审核状态
    statusFormatter (row, column) {
      let status = row.verify_status
      if (status === 0) {
        return '待审'
      } else if (status === 1) {
        return '通过'
      } else {
        return '不通过'
      }
    },
    // 查看
    look (row) {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.productLook.init(row)
      })
    },
    search () {
      this.pamars.page = 1;
      for (let v in this.pamars) {
        if (this.pamars[v] === "") {
          delete this.pamars[v]
        }
      }
      this.getList()
    },
    // 重置
    reset () {
      this.pamars = {
        page: 1,
        limit: 10,
        verify_status: 1,
        title: '',
        shop_name: '',
        category_id: null
      };
      this.area = [];
      this.getList()
    }

  }
}
</script>

<style scoped>
.c-info {
  color: #999999 !important;
}

.table-img {
  width: 60px;
  height: 60px;
}
</style>
